<template>
    <div class="about memberBg">
        <!-- 头部 -->
        <InsideHeader></InsideHeader>
                                                        
        <!-- memberInquiry -->
        <div class="memberInquiry">
            <div class="memberBlock">
                <div class="memberIndexN">
                    <div class="memberIndexNC">
                        <nuxt-link :to="{name: 'member'}">个人信息</nuxt-link>
                        <nuxt-link :to="{name: 'member-memberInquiry'}">我的问询</nuxt-link>
                        <nuxt-link :to="{name: 'member-memberElearning'}">我的elearning</nuxt-link>
                        <nuxt-link :to="{name: 'member-collect'}">我的收藏</nuxt-link>
                        <nuxt-link :to="{name: 'member-message'}" class="on">系统消息</nuxt-link>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="memberInquiryC">
                    <div class="memberInquiryDetailsCtit">
                        <em></em><p class="title">系统消息 <span class="allread">全部已读</span></p>
                    </div>
                    <div class="message">
                    	<ul>
                    		<li>
                    			<input type="checkbox" name="" class="fl"><h2>系统消息<span class="fr">2019-12-15 20:12:10</span></h2>
                    		    <p>欢迎注册三菱自动化网站</p> <span class="delmsg fr">删除</span>
                    		</li>
                    		<li>
                    			<input type="checkbox" name="" class="fl"><h2>系统消息<span class="fr">2019-12-15 20:12:10</span></h2>
                    		    <p>欢迎注册三菱自动化网站</p> <span class="delmsg fr">删除</span>
                    		</li>
                    	</ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <HomeHooter></HomeHooter>
    </div>
</template>

<script>
import $ from "jquery";
import "@/assets/css/home.css";
import "@/assets/css/member.css";
import InsideHeader from "@/components/headuser";
import HomeHooter from "@/components/footer";

export default {
  name: "memberInquiry",
  data() {
    return {
      checked:true
    };
  },
  components: {
    InsideHeader,
    HomeHooter,
  },
  methods: {
    memberInquiryCOSdel() {
      $(".memberInquiryCOSdelPUP").show();
    },
    memberInquiryCOSdelPUPCclose() {
      $(".memberInquiryCOSdelPUP").hide();
    }
  }
 
};
</script>

<style scoped>
.memberInquiryDetailsCtit .title{
	width: 95%
}
.message{
	width: 100%;
    height: auto;
    margin-top: 10px;
    padding: 0px;
    box-sizing: border-box;
}
.message ul li{
	border-bottom: solid 1px #E5E5E5;
	padding: 20px;
	overflow: hidden; 
}
.message ul li:hover{
	background-color: #E5E5E5
}
.message ul li:hover .delmsg{
	display: inline-block;
}
.message ul li h2{
	font-size: 18px;
	font-weight: normal;
	color: #E70012
}
.message ul li p{
	font-size: 14px;
	margin: 10px 0 0 30px;
	width:85%;
	float: left;
}
.message ul li span{
	font-size: 14px;
	color: #000
}
.delmsg{
	color: #E70012!important;
	margin-top: 10px;
	display: none
}
.allread{
	color: #333;
	font-size: 14px;
	float: right;
}
input[type="checkbox"]{width:18px;height:18px;display: inline-block;text-align: center;vertical-align: middle; line-height: 18px;position: relative; margin-right: 10px}
input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
input[type="checkbox"]:checked::before{content: "\2713";background-color: #fff;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #e50232;color:#e50232;font-size: 20px;font-weight: bold;}
</style>